@import "iconfont-variables";
@import "constants";

@primary-color: @H500;
@primary-bg-color: @H050;
@primary-border-color: @H300;

//== Scaffolding
//
//## Settings for some of the most global styles.

//** Background color for `<body>`.
@body-bg: @B000;
//** Global text color on `<body>`.
@text-color: @B800;
//** Global textual link color.
@text-primary-color: @H500;

//** Link hover decoration.
@link-hover-decoration: underline;
//** border base color.
@border-base-color: @B300;

//== Common
//
//## base unit
@base-unit-px: 18px;
//## inline gap
@inline-gap: 8px;

//== All icon content sets.
//** Close button content
@default-close-btn-content: @icon-close;
//** Check mark
@check-mark-content: @icon-check;
//** X mark
@x-mark-content: @icon-close;
//** Table expand
@table-expand-content: @icon-caret-right;
//** Table shrink
@table-shrink-content: @icon-caret-down;
//** DropLeft Caret Content
@drop-left-caret-content: @icon-arrow-left-line;
//** DropRight Caret Content
@drop-right-caret-content: @icon-arrow-right-line;
//** Dropup Caret Content
@dropup-caret-content: @icon-arrow-up-line;
//** Dropdown Caret Content
@dropdown-caret-content: @icon-arrow-down-line;
//** Uploder
@uploader-file-item-icon-content: @icon-attachment;
@uploader-file-item-retry-icon-content: @icon-reload;
//** Picker
@picker-search-bar-icon-content: @icon-search;
//** Calendar
@calendar-default-caret-content: @icon-calendar;
@calendar-only-time-caret-content: @icon-clock-o;
//** Progress
@progress-status-success-icon-content: @check-mark-content;
@progress-status-fail-icon-content: @x-mark-content;
//** Panel
@panel-heading-accordion-icon-content: @dropdown-caret-content;
@panel-heading-accordion-in-icon-content: @dropup-caret-content;

//== Typography
//
//## Font, line-height, and color for body text, headings, and more.

@font-family-base: "Avenir", "Trebuchet MS", Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", STXihei, sans-serif;
@font-family-icon: "rsuite-icon-font";

@font-size-base: 14px;
@font-size-large: 16px;
@font-size-small: 12px;

@font-size-h1: 28px;
@font-size-h2: 22px;
@font-size-h3: 18px;
@font-size-h4: 16px;
@font-size-h5: @font-size-base;
@font-size-h6: @font-size-base; // The same to font-size-base

//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
@line-height-computed: 20px;
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
@line-height-large-computed: 22px;
//** Unit-less `line-height` for use in components like buttons.
@line-height-large: unit(@line-height-large-computed/@font-size-base); // ~1.375
@line-height-base: unit(@line-height-computed/@font-size-base); // ~1.4285714285714286
@line-height-small: unit(@line-height-computed/@font-size-small); // ~1.6666666666666667

//** By default, this inherits from the `<body>`.
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;

//** Box shadows
@default-box-shadow: 0 4px 4px rgba(0, 0, 0, .12), 0 0 10px rgba(0, 0, 0, .06);

//== Iconography
//
//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.

//** Load fonts from this directory.
// default use cdn.jsdelivr.net
// If you want to use local resource , please change it to "./fonts"
@icon-font-path: "//cdn.jsdelivr.net/npm/rsuite-icon-font@3.0.0/fonts";
@icon-font-size-base: @font-size-base;
@icon-line-height-base: 1;
@icon-css-prefix: ~"@{ns}icon";
@icon-inverse: @B000;

//== Components
//
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).

@padding-base-vertical: 8px;
@padding-base-horizontal: 12px;

@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;

@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;

@padding-extra-small-vertical: 2px;
@padding-extra-small-horizontal: 8px;

@line-height-large: unit(22px/@font-size-large);
@line-height-small: 1.6666666666666667;

@border-radius-base: 6px;

//== Tables
//
@table-border-color: @B100;
@table-head-background: @B000;
@table-head-font-color: @B600;
@table-body-background: @B000;
@table-body-hover-background: @H050;
@table-resize-mouse-color: @H500;
@table-sort-icon-color: @H500;
@table-sort-icon-unsort: "\f0dc";
@table-sort-icon-desc: "\f0dd";
@table-sort-icon-asc: "\f0de";
@table-header-content-padding-vertical: 10px;
@table-header-font-size: @font-size-small;
@table-header-line-small: @line-height-small;
@table-body-content-padding-vertical: 13px;
@table-content-padding-horizontal: 10px;
@table-scrollbar-handle-background: @B400;
@table-scrollbar-pressed-handle-background: @B500;
@table-scrollbar-background: @B200;
@table-scrollbar-pressed-background: @B300;
@table-scrollbar-timing-duration: .1s;
@table-scrollbar-width: 10px;
@table-scrollbar-handle-width: 8px;
@table-scrollbar-handle-gap: (@table-scrollbar-width - @table-scrollbar-handle-width)/2;
@table-column-resize-spanner-width: 3px;
@table-header-sort-wrapper-margin-left: 5px;

@icon-table-sense-width: 10px;
@table-expand-icon-color: @B600;

//== Table Pagination
//
@table-pagination-padding-vertical: 20px;
@table-pagination-padding-horizontal: 20px;

//== Buttons
//
//## For each of Bootstrap's buttons, define text, background and border color.

@btn-font-weight: normal;
// Default Button color set;
@btn-default-color: @text-color;
@btn-default-bg: @B050;
@btn-default-bg-dark: @B200;
@btn-default-hover-color: @text-color;
@btn-default-hover-bg: @B200;
@btn-default-hover-bg-dark: @B300;
@btn-default-active-bg: @B300;
@btn-default-active-bg-dark: @B400;
@btn-default-focus-bg: @B200;
@btn-default-focus-bg-dark: @B300;
@btn-default-disabled-bg: @btn-default-bg;
// Button has icon color set
@btn-icon-with-text-bg: @B100;
@btn-icon-with-text-hover-bg: @B300;
@btn-icon-with-text-focus-bg: @B300;
@btn-icon-with-text-active-bg: @B400;
// Primary Button color set;
@btn-primary-color: #fff;
@btn-primary-bg: @H500;
// Default Button color set;
@btn-link-color: @link-color;
// Subtle Button color set;
@btn-subtle-primary-color: @primary-color;
@btn-subtle-color: @B600;
@btn-subtle-hover-color: @B000;
@btn-subtle-default-hover-color: @B800;
@btn-subtle-hover-bg: @B050;
@btn-subtle-focus-bg: @btn-subtle-hover-bg;
@btn-subtle-active-color: @B000;
@btn-subtle-active-default-color: @B900;
@btn-subtle-active-default-bg: @B200;
@btn-subtle-disabled-color: @B400;
// Ghost Button color set;
@btn-ghost-color: @primary-color;
@btn-ghost-border-color: @primary-color;
@btn-ghost-border-width: 1px;

// Allows for customizing button radius independently from global border radius
@btn-border-radius-base: @border-radius-base;
@btn-border-radius-large: @border-radius-base;
@btn-border-radius-small: @border-radius-base;

// Button Loading
@btn-loading-spin-default-diameter: 18px;
@btn-loading-spin-xs-diameter: 16px;
@btn-loading-spin-ring-wide: 3px;
@btn-loading-spin-ring-color: @B050;
@btn-spin-light-color: @B000;
@btn-spin-light-invert-color: @B500;
//== Btn Group
@btn-group-disabled-active-color: @B500;
//== other
@ripple-transition: background-color .3s linear, border-bottom-color .3s linear;

//== Forms
//
//##

@padding-base-input-vertical: @padding-base-vertical;
@padding-base-input-horizontal: @padding-base-horizontal;

@input-border-width: 1px;

//** `<input>` background color
@input-bg: #fff;
//** `<input disabled>` background color
@input-bg-disabled: @B050;

//** Text color for `<input>`s
@input-color: @B800;
//** Text disabled color
@input-color-disabled: @B400;
//** `<input>` border color
@input-border: @B200;

//** Default `.form-control` border radius
// This has no effect on `<select>`s  in some browsers, due to the limited stylability of `<select>`s in CSS.
@input-border-radius: @border-radius-base;
//** Large `.form-control` border radius
@input-border-radius-large: @border-radius-base;
//** Small `.form-control` border radius
@input-border-radius-small: @border-radius-base;

//** Border color for inputs on focus
@input-border-focus: @H500;

//** Input transition
@input-transition: border-color ease-in-out .3s;

//** Placeholder text color
@input-color-placeholder: @B600;

//** Default `.input` height
@input-height-base: @line-height-computed + (@padding-base-vertical * 2);
//** Large `.input` height
@input-height-large: @line-height-large-computed + (@padding-large-vertical * 2);
//** Small `.input` height
@input-height-small: @line-height-computed + (@padding-small-vertical * 2);
//** Extra small `.input` height
@input-height-extra-small: @line-height-computed + (@padding-extra-small-vertical * 2);

//** `.form-group` margin
@form-group-margin-bottom: 24px;
@control-label-margin-bottom: 4px;

//** Background color for textual input addons
@input-group-addon-bg: @B050;
//** Border color for textual input addons
@input-group-addon-border-color: @input-border;

//** Disabled cursor for form controls and buttons.
@cursor-disabled: not-allowed;

//== Form Layout
@form-control-width: 300px;
@help-block-color: @B600;
@help-block-inline-gap: 10px;
@control-label-width: 170px;
@control-label-margin-right: 12px;
@form-control-margin-left: 12px;
// == Error Message
@error-message-padding-vertical: 4px;
@error-message-padding-horizontal: 8px;
@error-message-background-color: @B000;
@error-message-border-color: @B200;
@error-message-height: @error-message-padding-vertical*2 + @line-height-computed;
@error-message-font-color: @error-color;
@error-message-triangle-width: 6px;
@error-message-triangle-gap: 10px;
@error-message-triangle-vertical: 4px;
@error-message-translate-distance: 2px;

//== Number input
//
//##
@number-input-height: @input-height-base;
@number-input-button-color: @B600;
@number-input-touchspin-font-size: 12px;

//== Dropdowns
//
//## Dropdown menu container and contents.

//**
@dropdown-caret-with: 10px;
@dropdown-caret-padding: 10px;

//** Background for the dropdown menu.
@dropdown-bg: #fff;
//** Divider color for between dropdown items.
@dropdown-divider-bg: #e5e5e5;
@dropdown-shadow: 0 0 10px rgba(0, 0, 0, .06), 0 4px 4px rgba(0, 0, 0, .12);

//** Dropdown link text color.
@dropdown-link-color: @B800;
//** Hover color for dropdown links.
@dropdown-link-hover-color: @B800;
//** Hover background for dropdown links.
@dropdown-link-hover-bg: @H050;

//** Active dropdown menu item text color.
@dropdown-link-active-color: @H500;
//** Active dropdown menu item background color.
@dropdown-link-active-bg: fade(@H050, 50);

//** Disabled dropdown menu item background color.
@dropdown-link-disabled-color: @B200;

//** Text color for headers within dropdown menus.
@dropdown-header-color: @B500;

//** Dropdown item content vertical padding
@dropdown-item-content-padding-vertical: 8px;
//** Dropdown item content horizontal padding
@dropdown-item-content-padding-horizontal: 12px;
//** Dropdown item content submenu icon
@dropdown-item-content-submenu-icon-angle-spacing: 10px;
@dropdown-item-content-submenu-icon-angle-width: 5px;
@dropdown-item-content-submenu-icon-angle-line-height: @line-height-base;
@dropdown-item-content-submenu-icon-angle-size: @font-size-base;
@dropdown-toggle-padding-right: @padding-base-horizontal+@dropdown-caret-with+@dropdown-caret-padding;
//** Deprecated `@dropdown-caret-color`
@dropdown-caret-color: #000;
//** Dropdown Caret Font Family
@dropdown-caret-font-family: @font-family-icon;

//** dropDownMenu的偏移量
@dropdown-max-height: 280px;
@dropdown-menu-lg-top: 40px;
@dropdown-menu-sm-top: 27px;
@dropdown-menu-xs-top: 21px;

//== Toggle
@toggle-default-bg: @B300;
@toggle-default-hover-bg: @B400;
//Toggle checked background color
@toggle-checked-bg: @H500;
@toggle-checked-hover-bg: @H600;
//Disabled toggle checked background color
@toggle-disabled-background-color: @H300;
@toggle-active-scale: 1.2;
@toggle-transition: .2s ease-in-out;
@toggle-md-height: 24px;
@toggle-md-handle-gap: 3px;
@toggle-md-min-width: 44px;
@toggle-md-inner-font-size: @font-size-small;
@toggle-md-handle-diameter: @toggle-md-height - @toggle-md-handle-gap*2;
@toggle-md-handle-bg: @B000;
@toggle-md-inner-line-height-computed: @toggle-md-height;
@toggle-md-inner-line-height: unit(@toggle-md-inner-line-height-computed/@toggle-md-inner-font-size);
// The same to button
@toggle-md-inner-margin: @padding-base-vertical;

//# small size
@toggle-sm-height: 14px;
@toggle-sm-min-width: 26px;
@toggle-sm-handle-gap: 2px;
@toggle-sm-inner-margin: 6px;
@toggle-sm-inner-font-size: @font-size-small;

//# Large size
@toggle-lg-height: 30px;
@toggle-lg-min-width: 55px;
@toggle-lg-handle-gap: 4px;
@toggle-lg-inner-margin: @padding-small-horizontal;
@toggle-lg-inner-font-size: @font-size-base;

//-- Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
//
// Note: These variables are not generated into the Customizer.

@zindex-date-range-picker-calendar-dropdown: 1;
@zindex-date-range-picker-table-cell-content: 1;
@zindex-input: 2;
@zindex-input-group-icon: 4;
@zindex-dropdown: 5;
@zindex-dropdown-a: 10;
@zindex-navbar: 1000;
@zindex-navbar-fixed: 1030;
@zindex-modal-background: 1040;
@zindex-modal: 1050;
@zindex-drawer: 1050;
@zindex-drawer-background: 1040;
@zindex-popover: 1060;
@zindex-tooltip: 1070;
@zindex-notification: 1080;
//#==== Uploader
@zindex-uploader-picture-preview: 1;
@zindex-uploader-picture-loading-wrapper: 2;
@zindex-uploader-picture-error-wrapper: 3;
@zindex-uploader-picture-remove-button: 4;
//#==== Form
@zindex-error-message: 5;
//#==== Table
@zindex-table-body-row-wrapper: 0;
@zindex-table-header-row-wrapper: 2;
@zindex-table-column-resize-spanner: 3;
@zindex-table-cell-group-fixed: 4;
@zindex-table-row-cell-group-shadow: 5;
@zindex-table-mouse-area: 6;

//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
// @screen-xs
@screen-phone: 480px;

// Small screen / tablet
// @screen-sm
@screen-tablet: 768px;

// Medium screen / desktop
// @screen-md
@screen-desktop: 992px;

// Large screen / wide desktop
// @screen-lg
@screen-lg-desktop: 1200px;

// So media queries don't overlap when required, provide a maximum
@screen-phone-max: (@screen-tablet - 1);
@screen-tablet-max: (@screen-desktop - 1);
@screen-desktop-max: (@screen-lg-desktop - 1);

//== Grid system
//
//## Define your custom responsive grid.

//** Number of columns in the grid.
@grid-columns: 24;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 10px;

//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.

// Small screen / tablet
@container-tablet: (720px + @grid-gutter-width);
//** For `@screen-sm-min` and up.
@container-sm: @container-tablet;

// Medium screen / desktop
@container-desktop: (940px + @grid-gutter-width);
//** For `@screen-md-min` and up.
@container-md: @container-desktop;

// Large screen / wide desktop
@container-large-desktop: (1140px + @grid-gutter-width);
//** For `@screen-lg-min` and up.
@container-lg: @container-large-desktop;

//== Navs
//
//##
// Base
@nav-item-font-size: @font-size-base;
@nav-item-line-height: @line-height-base;
@nav-item-padding-vertical: 8px;
@nav-item-padding-horizontal: 12px;
@nav-item-spacing: 6px;
@nav-base-height: @line-height-computed+@nav-item-padding-vertical*2;
@nav-item-icon-spacing: 6px;
@nav-item-font-default-color: @B600;
@nav-item-font-active-color: @H600;
@nav-item-border-radius: 6px;
@nav-item-default-hover-bg: @B200;
@nav-item-hover-font-color: @B800;
@nav-item-click-bg: @B200;
@nav-item-click-font-color: @B900;
@nav-item-active-font-color: @H500;
@nav-item-disable-font-color: @B400;
@nav-item-transition: color .3s linear, background-color .3s linear;

// Variant
//** Tab
@nav-tab-default-bg: @B000;
@nav-tab-waterline-width: 1px;
@nav-tab-waterline-color: @B300;
@nav-tab-waterline: @nav-tab-waterline-width solid @nav-tab-waterline-color;

//** Subtle
@nav-subtle-waterline-width: 2px;
@nav-subtle-waterline-default-color: @B050;
@nav-subtle-waterline-active-color: @H500;
@nav-subtle-default-waterline: @nav-subtle-waterline-width solid @nav-subtle-waterline-default-color;
@nav-subtle-active-waterline: @nav-subtle-waterline-width solid @nav-subtle-default-waterline;

//** Divider
@nav-divider-margin-vertical: 6px;

//== Navbar
//
//##
@nav-bar-padding-vertical: 18px;
@nav-bar-padding-horizontal: 16px;
@nav-bar-height: @nav-bar-padding-vertical * 2 + @line-height-computed;
//** Default
@nav-bar-default-bg: @B050;
@nav-bar-default-active-color: @H500;
@nav-bar-default-active-bg: transparent;
@nav-bar-default-font-color: @B800;

//** Inverse
@nav-bar-inverse-font-color: @B000;
@nav-bar-inverse-bg: @H500;
@nav-bar-inverse-hover-bg: @H600;
@nav-bar-inverse-active-bg: @H700;

//** Subtle
@nav-bar-subtle-bg: @B000;
@nav-bar-subtle-font-color: @B700;
@nav-bar-subtle-font-active-color: @H500;
@nav-bar-subtle-hover-bg: @B050;
@nav-bar-subtle-hover-font-color: @B800;
@nav-bar-subtle-active-bg: fade(@B000, 0);
@nav-bar-subtle-active-font-color: @H500;

//== Sidenav
//
//##
@sidenav-padding-vertical: 15px;
@sidenav-childrn-padding-vertical: 11px;
@sidenav-padding-horizonal: 20px;
@sidenav-collapse-in-width: 100%;
@sidenav-default-width: 56px;
@sidenav-item-height: @sidenav-padding-vertical*2 + @line-height-computed;
@sidenav-menu-max-height: @sidenav-item-height*40;
@sidenav-menu-animation-time: 1.5s;
@sidenav-level1-item-font-size: @font-size-large;
@sidenav-level1-item-line-height: unit(@line-height-computed/@font-size-large);
@sidenav-icon-spacing: 20px;
@sidenav-icon-width: @sidenav-level1-item-font-size;
@sidenav-dropdown-toggle-caret-width: 20px;
@sidenav-level-retract: 9px;
@sidenav-level1-retract: @sidenav-padding-horizonal + @sidenav-icon-width + @sidenav-icon-spacing;
@sidenav-collapse-transition-config: .2s ease-in;
// ** Sidenav default
@sidenav-deafult-bg: @B050;
@sidenav-deafult-font-color: @nav-item-font-default-color;
@sidenav-deafult-hover-font-color: @nav-item-hover-font-color;
@sidenav-deafult-click-font-color: @nav-item-click-font-color;
@sidenav-deafult-active-font-color: @nav-item-active-font-color;
@sidenav-deafult-hover-bg: @nav-item-default-hover-bg;
@sidenav-deafult-click-bg: @nav-item-click-bg;
// ** Sidenav inverse
@sidenav-inverse-font-color: @B000;
@sidenav-inverse-bg: @nav-bar-inverse-bg;
@sidenav-inverse-hover-bg: @nav-bar-inverse-hover-bg;
@sidenav-inverse-active-bg: @nav-bar-inverse-active-bg;

// ** Sidenav subtle
@sidenav-subtle-bg: @B000;
@sidenav-subtle-hover-bg: @B050;

//== Pagination
//
//##

@pagination-hover-color: @btn-subtle-default-hover-color;
@pagination-active-color: @H500;
@pagination-hover-bg: @btn-subtle-hover-bg;
@pagination-active-bg: @btn-subtle-active-default-bg;
@pagination-transition: @ripple-transition, color .3s linear;

//== Steps
//
//##

@steps-bg: @B000;
@steps-icon-diameter: 30px;
@steps-icon-size-default-font-size: 12px;
@steps-default-color: @B600;
@steps-tail-default-color: @B400;
@steps-icon-process-bg: @H500;
@steps-icon-process-color: @B000;
@steps-content-process-color: @B800;
@steps-error-color: @error-color;
@steps-icon-finish-color: @H500;
@steps-icon-error-color: @steps-error-color;
@steps-icon-spacing: 10px;
@steps-item-spacing: 10px;
// This space place the steps-icon
@steps-icon-space-width: @steps-icon-diameter+ @steps-icon-spacing;
@steps-icon-size: @font-size-large;
@steps-icon-line-height: unit((@steps-icon-diameter - 2px)/@font-size-large);
@steps-title-font-size: @font-size-large;
@steps-title-line-height: unit(@steps-icon-diameter/@font-size-large);
@steps-description-margin-top: 12px;
// Small
@small-steps-icon-diameter: 24px;
@small-steps-icon-space-width: @small-steps-icon-diameter + @steps-icon-spacing;
@small-steps-icon-line-height: unit((@small-steps-icon-diameter - 2px)/@font-size-base);
@small-steps-title-line-height: unit(@small-steps-icon-diameter/@font-size-base);
@small-steps-icon-size: @font-size-base;
@small-steps-description-font-size: @font-size-small;
@small-steps-description-line-height: @line-height-small;
@small-steps-description-margin-top: 12px;

//== Form states and alerts
//
//## Define colors for form feedback states and, by default, alerts.

@state-success-text: @success-color;
@state-success-bg: @success-light-color;

@state-info-text: @info-color;
@state-info-bg: @info-light-color;

@state-warning-text: @warning-color;
@state-warning-bg: @warning-light-color;

@state-error-text: @error-color;
@state-error-bg: @error-light-color;

//** Checkbox Styles
@checkbox-width-height: 16px;
@checkbox-sense-width: 10px;
@checkbox-border-radius: 3px;
@checkbox-default-border-color: @border-base-color;
@checkbox-checked-border-color: @border-primary-color;
@checkbox-disabled-color: @B050;
@checkbox-bg: @B000;

//** Radio Checked width
@radio-width-height: 16px;
@radio-inner-width-height: 6px;
@radio-sense-width: 10px;
@radio-border-radius: 50%;
@radio-default-border-color: @border-base-color;
@radio-checked-border-color: @border-primary-color;
@radio-disabled-color: @B050;
@radio-bg: @B000;
@radio-inner-checked-color: @B000;

//== Tooltips
//
//##

//** Tooltip max width
@tooltip-max-width: 250px;
//** Tooltip text color
@tooltip-color: #fff;
//** Tooltip background color
@tooltip-bg: @B900;
//** Tooltip opacity
@tooltip-opacity: 1;
//** Tooltip border radius
@tooltip-border-radius: 4px;

//** Tooltip arrow width
@tooltip-arrow-width: 6px;
//** Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;
//** Tooltip translate distance
@tooltip-translate-distance: 2px;
//** Distance of Arrow and frame.
@tooltip-arrow-gap-lg: 10px;
@tooltip-arrow-gap-sm: 4px;
//== Popovers
//
//##

//** Popover body background color
@popover-bg: @B000;
//** Popover maximum width
@popover-max-width: 250px;
//** Popover border-radius
@popover-border-radius: 4px;

//** Popover arrow width
@popover-arrow-width: 6px;
//** Popover arrow color
@popover-arrow-color: @popover-bg;
//** Popover translate distance
@popover-translate-distance: 2px;

//** Popover outer arrow width
@popover-arrow-outer-width: @popover-arrow-width;
//** Distance of Arrow and frame.
@popover-arrow-gap: 4px;

//== Labels
//
//##

//** Default label text color
@label-color: #fff;
//** Default text color of a linked label
@label-link-hover-color: #fff;

//== Modals
//
//##

//** Padding applied to the modal content
@modal-content-padding: 20px;
//** Margin of modal header and body
@modal-body-margin: 30px;
//** Modal border-radius
@modal-border-radius: @border-radius-base;
//** Modal title font-size
@modal-title-font-size: @font-size-large;
//** Modal title color
@modal-title-color: @B900;
//** Modal title line-height
@modal-title-line-height: @line-height-large;

//** Background color of modal content area
@modal-content-bg: @B000;

//** Modal Box shadow
@modal-box-shadow: @default-box-shadow;

//** Modal backdrop background color
@modal-backdrop-bg: @B900;
//** Modal backdrop opacity
@modal-backdrop-opacity: .3; // 30%
//** Modal header border color
@modal-header-border-color: #e5e5e5;
//** Modal footer border color
@modal-footer-border-color: @modal-header-border-color;

//** Modal close button
@modal-close-btn-size: @font-size-small;
@modal-close-btn-line-height: @line-height-small;
@modal-close-btn-color: @B900;
//** Modal sizes
@modal-lg: 968px;
@modal-md: 800px;
@modal-sm: 600px;
@modal-xs: 400px;

//** Modal full size margin
@modal-full-size-margin: 60px;

//== Drawer
//
//##
//** Background color of drawer content area
@drawer-content-bg: @B000;
//** Font color of drawer title.
@drawer-title-color: @B900;
//** Drawer backdrop background color
@drawer-backdrop-bg: @B900;
//** Drawer backdrop opacity
@drawer-backdrop-opacity: .3; // 30%
//** Padding applied to the drawer content
@drawer-content-spacing: 20px;
//** Margin of modal header and body
@drawer-body-margin: 30px;
//** Modal Box shadow
@drawer-box-shadow: @default-box-shadow;
//** Modal close button
@drawer-close-btn-size: @font-size-small;
@drawer-close-btn-line-height: @line-height-small;
@drawer-close-btn-color: @B900;

//** Drawer sizes
@drawer-horizontal-lg: @modal-lg;
@drawer-horizontal-md: @modal-md;
@drawer-horizontal-sm: @modal-sm;
@drawer-horizontal-xs: @modal-xs;

@drawer-vertical-lg: 568px;
@drawer-vertical-md: 480px;
@drawer-vertical-sm: 400px;
@drawer-vertical-xs: 290px;

//** Modal full size margin
@drawer-full-size-margin: 60px;

//== Message
//
//## Define alert colors, border radius, and padding.

@message-padding: 20px;
@message-icon-size: @font-size-small;
@message-icon-large-size: 24px;
@message-close-btn-size: 12px;
@message-close-btn-padding: 8px 8px 0;
@message-icon-margin-right: 10px;
@message-title-size: @font-size-base;
@message-border-radius: @border-radius-base;
@message-link-font-weight: bold;

// Alternate colors
@message-success-bg: @state-success-bg;
@message-success-icon-color: @state-success-text;
@message-info-bg: @state-info-bg;
@message-info-icon-color: @state-info-text;
@message-warning-bg: @state-warning-bg;
@message-warning-icon-color: @state-warning-text;
@message-error-bg: @state-error-bg;
@message-error-icon-color: @state-error-text;

//== Alert
//
//##
@notification-ns: ~"@{ns}notification";
@alert-padding: 20px;
@alert-border-radius: @border-radius-base;
@alert-max-width: 400px;
@alert-box-shadow: @default-box-shadow;
@alert-close-btn-size: 12px;
@alert-close-btn-padding: 4px;

// Alternate colors
@alert-success-bg: @state-success-bg;
@alert-success-icon-color: @state-success-text;
@alert-info-bg: @state-info-bg;
@alert-info-icon-color: @state-info-text;
@alert-warning-bg: @state-warning-bg;
@alert-warning-icon-color: @state-warning-text;
@alert-error-bg: @state-error-bg;
@alert-error-icon-color: @state-error-text;

//== Notification
//
//##
@notify-default-bg: @B000;
@notify-padding: 20px;
@notify-border-radius: @border-radius-base;
@notify-box-shadow: @default-box-shadow;
@notify-max-width: 400px;
@notify-close-btn-font-size: 12px;
@notify-close-btn-margin: 8px;
@notify-close-button-content: @default-close-btn-content;
@nofify-close-btn-color: @B600;
@notify-title-font-size: @font-size-large;
@notify-title-icon-size: 24px;
@notify-title-icon-margin: 10px;
@notify-title-description-gap: 8px;
@notify-title-font-color: @B900;
@notify-description-color: @B800;

// Alternate colors
@notify-success-icon-color: @state-success-text;
@notify-info-icon-color: @state-info-text;
@notify-warning-icon-color: @state-warning-text;
@notify-error-icon-color: @state-error-text;

//== Loaders
//
//##
@loader-lg-diameter: 64px;
@loader-md-diameter: 36px;
@loader-sm-diameter: 18px;
@loader-xs-diameter: 16px;
@loader-content-color: @B800;
@loader-content-inverse-color: @B050;
@loader-lg-content-font-size: @font-size-large;
@loader-md-content-font-size: @font-size-base;
@loader-sm-content-font-size: @font-size-base;
@loader-xs-content-font-size: @font-size-small;
@loader-default-diameter: @loader-sm-diameter;
@loader-default-content-font-size: @font-size-small;
// backdrop color
@loader-backdrop-color: fade(@B900, 30);
// spin
@loader-spin-ring-wide: 3px;
@loader-spin-ring-color: fade(@B050, 80);
@loader-spin-ring-active-color: @B500;
@loader-spin-ring-inverse-color: fade(@B050, 30);
@loader-spin-ring-inverse-active-color: @B000;
// spin animation time
@loader-duration-fast: .4s;
@loader-duration-normal: .6s;
@loader-duration-slow: .8s;
// spacing
@loader-content-spin-spacing-horizontal: 12px;
@loader-content-spin-spacing-horizontal-xs: 10px;
@loader-content-spin-spacing-vertical: 10px;
//== Progress
//
//##
@progress-line-padding-vertical: 8px;
@progress-line-padding-horizontal: 12px;
@progress-info-text-color: @B700;
@progress-bar-color: @primary-color;
@progress-bar-bg: @B200;
@progress-bar-fill-bg: @H500;
@progress-font-size: @font-size-large;
@progress-bar-height: 10px;
@progress-element-gap: 12px;
@progress-status-success-color: @success-color;
@progress-status-fail-color: @error-color;
//== Uploader
//
//##
@uploader-file-list-margin-top: 10px;
@uploader-file-item-icon-font-size: 16px;
@uploader-default-font-color: @B800;
@uploader-light-font-color: @B600;
@uploader-item-hover-background-color: @B050;
@uploader-base-padding: 8px;
@uploader-picture-side-length: 66px;
@uploader-picture-item-gap: 10px;
@uploader-picture-remove-button-radius: 24px;
@uploader-picture-border-color: @B200;
@uploader-picture-background-color: @B300;
@uploader-picture-text-border-color: @B300;
@uploader-picture-text-preview-side-length: 50px;
@uploader-file-item-retry-icon-color: @B800;

//== Panels
//
//##
@panel-padding: 20px;
@panel-heading-font-size: 16px;
@panel-split-line-color: @B200;
@panel-group-panel-heading-hover-background: @B050;
@panel-heading-color: @B900;
@panel-accodion-transition: .3s linear;
@panel-border: 1px solid @B200;

//== Time lines
//
//##
@time-line-item-content-margin-left: 12px;
@time-line-dot-side-length: 10px;
@time-line-item-padding-left: @time-line-item-content-margin-left+@time-line-dot-side-length;
@time-line-dot-default-background-color: @B300;
@time-line-last-dot-default-background-color: @H500;
@time-line-tail-width: 2px;
@time-line-tail-default-background-color: @B300;
@time-line-item-content-padding-bottom: 18px;
@time-line-dot-center-gap: (@line-height-computed - @time-line-dot-side-length)/2;

//== Tags
//
//##
@tag-default-background: @B050;
@tag-default-color: @B800;
@tag-gap: 10px;

//== Divider
//
//##
@divider-border-color: @B200;
@divider-default-horizontal-margin: 24px;
@divider-with-text-horizontal-margin: 30px;
@divider-text-space: 12px;
@divider-default-vertical-margin: 12px;

//== Picker
//** prefixs
@select-picker-prefix: ~"picker-select";
@check-picker-prefix: ~"picker-check";
@calendar-picker-prefix: ~"picker-calendar";
@cascader-picker-prefix: ~"picker-cascader";
@tree-picker-prefix: ~"picker-tree";
@check-tree-picker-prefix: ~"picker-checktree";
@date-range-picker-prefix: ~"picker-daterange";
//** Picker background
@picker-bg: @dropdown-bg;
@picker-shadow: @dropdown-shadow;
//** Picker content width
@picker-content-min-width: 200px;
@picker-content-max-width: 300px;
@picker-search-bar-icon-width: @font-size-base;
//** Picker menu padding
@picker-menu-padding: 12px;
//** Dropdown item content vertical padding
@picker-item-content-padding-vertical: 8px;
//** Dropdown item content horizontal padding
@picker-item-content-padding-horizontal: 12px;
//** group title
@picker-group-title-color: @B900;
@picker-group-children-padding-left: 26px;
@picker-group-select-menu-gap: 6px;
@picker-group-select-menu-lin-color: @dropdown-divider-bg;
@picker-item-transition: color .3s linear, background-color .3s linear;
@picker-select-item-color: @B800;
@picker-menu-item-hover-bg: @H050;
// Select picker
@picker-select-menu-item-selected-bg: fade(@H050, 50);
@picker-select-menu-item-selected-color: @H500;
@picker-menu-item-disabled-color: @B400;
@picker-selected-value-color: @H500;
@picker-select-arrow-down: "\F0D7";

// Check Picker
@picker-check-checkbox-gap: 10px;
@picker-children-check-item-padding-left: 14px;
@picker-check-item-content-padding-left: @picker-item-content-padding-horizontal+@checkbox-width-height+@picker-check-checkbox-gap;

// Tree Picker
@picker-tree-bg: @B000;
@picker-tree-padding: 12px;
@picker-tree-arrow-down: "\F0D7";
@picker-tree-node-padding-vertical: @padding-base-vertical;
@picker-tree-node-padding-horizontal: @padding-base-horizontal;
@picker-tree-node-font-size: @font-size-base;
@picker-tree-node-active-color: @picker-select-menu-item-selected-color;
@picker-tree-node-active-bg: @picker-select-menu-item-selected-bg;
@picker-tree-node-line-height: @line-height-base;
@picker-tree-node-height: @line-height-computed + @picker-tree-node-padding-vertical*2;
@picker-tree-arrow-down-width: 8px;
@picker-tree-arrow-down-gap: 8px;
@picker-tree-node-hover-bg: @H050;

//== Calendar Picker
@calendar-header-width: 280px;
@calendar-picker-padding: 12px;
@calendar-picker-view-margin-top: 6px;
@calendar-header-title-margin: 4px;
@calendar-header-title-error-color: @error-color;
@calendar-table-cell-padding: 1px;
@calendar-table-cell-content-font-size: @font-size-base;
@calendar-table-cell-content-line-height: @line-height-base;
@calendar-table-cell-content-padding: 5px;
@calendar-table-cell-content-hover-bg: @H050;
@calendar-table-cell-content-today-border-width: 1px;
@calendar-table-cell-content-today-border-color: @H500;
@calendar-table-cell-content-selected-color: @H500;
@calendar-table-cell-content-disabled-color: @B400;
@calendar-table-cell-content-selected-font-color: @B000;
@calendar-table-cell-header-color: @B600;
@calendar-month-dropdown-row-border-color: @B200;
@calendar-month-dropdown-year-active-color: @H500;
@calendar-dropdown-top: 40px; // @calendar-picker-padding + content-height + gap
@calendar-time-dropdown-column-title-bg: @B050;
@calendar-time-dropdown-column-title-font-color: @B600;
@calendar-time-dropdown-column-cell-default-color: @B800;
@calendar-time-dropdown-column-cell-active-color: @B000;
@calendar-time-dropdown-column-cell-hover-bg: @H050;
@calendar-time-dropdown-column-cell-active-bg: @H500;
@calendar-right-btn-ok-color: @btn-primary-color;
@calendar-right-btn-ok-bg: @btn-primary-bg;
@calendar-option-color: @H500;
@calendar-in-menu-content-side-length: 30px;

//== DateRange Picker
@date-range-picker-header-padding-horizontal: 12px;
@date-range-picker-header-padding-vertical: 8px;
@date-range-picker-header-font-size: @font-size-base;
@date-range-picker-header-line-height: @line-height-base;
@date-range-picker-inner-border: 1px solid @B200;

//== Slider
//
//##
@slider-bar-default-bg: @B100;
@slider-bar-hover-bg: @B100;
@slider-bar-side-length: 6px;
@slider-handle-diameter: 12px;
@slider-handle-border-width: 2px;
@slider-handle-default-bg: @B000;
@slider-handle-dragging-bg: @H500;
@slider-handle-default-border-color: @H500;
@slider-handle-hover-border-color: @H500;
@slider-handle-hover-box-shadow: 0 0 0 4px fade(@H100, 40);
@slider-handle-dragging-box-shadow: none;
@slider-progress-bar-bg: @H500;
@slider-calibration-diameter: 8px;
@slider-calibration-border-width: 2px;
@slider-calibration-bg: @B000;
@slider-calibration-border-color: @B100;
@slider-calibration-pass-border-color: @H500;
@slider-mark-margin-top: 9px;

//== Breadcrumbs
//
//##
@breadcrumb-padding-vertical: 8px;
@breadcrumb-padding-horizontal: 15px;
@breadcrumb-separator-margin: 4px;
//** Breadcrumb text color
@breadcrumb-color: @text-color;
//** Text color of current page in the breadcrumb
@breadcrumb-active-color: @B600;

//== Close
//
//##

@close-font-weight: bold;
@close-color: #000;
@close-text-shadow: 0 1px 0 #fff;

//== Type
//
//##

//** Horizontal offset for forms and lists.
@component-offset-horizontal: 180px;
//** Text muted color
@text-muted: @B400;
//** Headings small color
@headings-small-color: @B400;
//** Blockquote small color
@blockquote-small-color: @B400;
//** Blockquote font size
@blockquote-font-size: (@font-size-base * 1.25);
//** Blockquote border color
@blockquote-border-color: @B050;
//** Page header border color
@page-header-border-color: @B050;
//** Width of horizontal description list titles
@dl-horizontal-offset: @component-offset-horizontal;
//** Horizontal line color.
@hr-border: @B050;
